<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 10px;

  .item {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 20px;

    .item1 {
      img {
        width: 40px;
        height: 40px;
      }
    }

    .item2 {
      display: flex;
      text-align: center;
      align-items: center;
      margin: 0px 10px;

      img {
        width: 90px;
        height: 20px;
      }
    }

    .item3 {
      position: absolute;
      top: 40px;
    }
  }

  .item4 {
    margin-top: 20px;
    margin-left: 50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .btn {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 999;
  }

  .title1 {
    display: flex;
    justify-content: space-between;
    margin: 10px 10px;
  }
}
</style>
<template>
  <div class="box">
    <van-nav-bar title="评论" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <!-- 遍历his数组，渲染评论列表 -->
    <!-- <div v-for="(item, index) in his" :key="index">
      <div class="item">
        <div class="item1">
          <img :src="item.avatar" alt="" />
        </div>
        <div class="item2">
          <p>姓名:{{ item.name.slice(0, 1) + '**' }}</p>
          <img :src="item.titleImg" alt="" />
          <p class="item3">发布时间:{{ item.time }}</p>
        </div>
      </div>
      <p class="item4">标题:{{ item.content }}</p>
    </div> -->
    <!-- 遍历listdata数组，渲染评论列表 -->
    <div v-for="(item, index) in listdata" :key="index">
      <div class="item">
        <div class="item1">
          <img :src="item.avatar ? item.avatar : user.avatar" alt="" />
        </div>
        <div class="item2">
          <p>姓名:{{ item.name.slice(0, 1) + '**' ? item.name.slice(0, 1) + '**' : user.nickName.slice(0, 1) + '**' }}</p>
          <img :src="item.titleImg" alt="" />
          <p class="item3">发布时间:{{ item.time }}</p>
        </div>
      </div>
      <p class="item4">内容:{{ item.content }}</p>
    </div>
    <!-- 弹出层，用于添加评论 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '100%' }">
      <div class="title1"><span>评论</span> <span @click="show = false">X</span></div>
      <!-- <input type="text" v-model="ping.name"> -->
      <div style="margin-left: 3px;"><textarea name="" id="" cols="57" rows="5" v-model="ping.content" placeholder="请输入评论内容"></textarea></div>
      <van-button @click="add" block type="primary">添加</van-button>
    </van-popup>
    <!-- 添加评论按钮 -->
    <van-button @click="showlist" block type="primary" class="btn">向医生提问</van-button>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { reactive, ref } from 'vue'
import { showToast } from 'vant'
// 定义listdata数组，用于存储评论列表数据
const listdata = ref<any>([])
// 定义show变量，用于控制弹出层的显示与隐藏
const show = ref(false)
// 定义his数组，用于存储历史评论数据
// const his = ref<any>([])
// 定义ping对象，用于存储添加评论的数据
const user = JSON.parse(localStorage.getItem('user') || '{}')
const ping = reactive<any>({
  avatar: user.avatar,
  name: user.nickName,
  time: '',
  titleImg: '',
  content: ''
})



// 获取评论列表数据
const list = async () => {
  const res = await axios.get('/api/v1/commentList')
  console.log(res.data.data);
  listdata.value = res.data.data
}
list()
// 显示添加评论的弹出层
const showlist = () => {
  show.value = true
}
// 点击添加评论按钮，将ping对象中的数据添加到showlist1数组中，并清空ping对象中的数据

// const user=JSON.parse(localStorage.getItem('user') || '{}')
const add = async () => {
  // 添加数据不相同
  const user = JSON.parse(localStorage.getItem('user') || '{}')
  const res = await axios.post('/api/v1/commentAdd', {
    avatar: user.avatar,
    name: user.nickName,
    time: ping.time,
    titleImg: ping.titleImg,
    content: ping.content
  })

  console.log(res)
  if (res.data.code == 200) {
    list()
    showToast('评论成功')
    ping.content='',

    show.value = false
  } else {
    showToast('评论失败')
  }

}

// // 获取历史评论数据
// const hislist = () => {
//   // 数据持久化
//   his.value = JSON.parse(localStorage.getItem('showlist2') || '[]')
//   list()
//   console.log(his.value)
// }
// hislist()

// onMounted(() => {
//   list()
// })
</script>